import styles from "./index.module.less";

const Index = ({
  lowOrder = 30, // 低位
  lowPosition = 10, // 低低位
  highOrder = 240, // 高位
  highPosition = 260, // 高高位
  superelevation = 280, // 超高位
  totaHoldCapacity = 300, // 总舱容
  currentHoldCapacity = 100, // 当前舱容
}) => {
  const outerHeight = 376;

  const getHeight = (value) => {
    const height = Math.floor((value / totaHoldCapacity) * (outerHeight - 10));
    return height;
  };

  return (
    <div style={{ height: outerHeight }} className={styles.outerBox}>
      <div
        className={styles.innerBox}
        style={{ height: getHeight(currentHoldCapacity) }}
      >
        <div className={styles.bar} style={{ height: outerHeight }}></div>
      </div>

      <div
        className={styles.lowOrder}
        style={{ bottom: getHeight(lowOrder) }}
      />
      <div
        className={styles.lowPosition}
        style={{ bottom: getHeight(lowPosition) }}
      />
      <div
        className={styles.highOrder}
        style={{ bottom: getHeight(highOrder) }}
      />
      <div
        className={styles.highPosition}
        style={{ bottom: getHeight(highPosition) }}
      />
      <div
        className={styles.superelevation}
        style={{ bottom: getHeight(superelevation) }}
      />
    </div>
  );
};
export default Index;
